<template>
  <a-form
    class="cancelForm"
    :rules="Data.rules"
    v-if="isBatchHasObj.id"
    ref="setForm"
    name="cancelForm"
    :model="isBatchHasObj"
    :label-col="{ span: 4 }"
    labelAlign="left"
  >
    <a-form-item label="是否为模块" name="sfwmk">
      <a-switch
        v-model:checked="isBatchHasObj.sfwmk"
        checkedChildren="是"
        unCheckedChildren="否"
        :checkedValue="1"
        :unCheckedValue="0"
        :disabled="!!isBatchHasObj?.children?.length || isBatchHasObj.sjSfwmk === 0"
      />
    </a-form-item>
    <a-form-item label="题目编号" name="tmbh">
      <a-input
        placeholder="请填写题目编号(例：1,2,3,一,二,三,Ⅰ,Ⅱ,Ⅲ)"
        v-model:value="isBatchHasObj.tmbh"
      ></a-input>
    </a-form-item>
    <a-form-item label="模块名称" name="mkmc" v-if="isBatchHasObj.sfwmk === 1">
      <a-input placeholder="请填写模块名称" v-model:value="isBatchHasObj.mkmc"></a-input>
    </a-form-item>

    <a-form-item label="分值" name="tmfz">
      <a-input
        placeholder="请填写题目/模块分值"
        v-model:value="isBatchHasObj.tmfz"
        min="0.5"
        type="number"
        step="0.5"
      ></a-input>
    </a-form-item>
    <div v-if="isBatchHasObj.sfwmk !== 1">
      <a-form-item label="题目标题" name="tmbt">
        <a-input placeholder="请填写题目标题" v-model:value="isBatchHasObj.tmbt"></a-input>
      </a-form-item>
      <a-form-item label="题目类型" name="tmlx">
        <a-select
          v-model:value="isBatchHasObj.tmlx"
          :default-active-first-option="false"
          :show-arrow="false"
          :options="Data.teacherOptions"
          :filter-option="false"
          :disabled="!!isBatchHasObj?.children?.length || isBatchHasObj.sjSfwmk === 0"
          :not-found-content="null"
          placeholder="请选择题目类型"
        />
      </a-form-item>
      <a-form-item
        label="题目选项数量"
        name="xxsl"
        v-if="
          isJdCorrectType(isBatchHasObj) &&
          !isBatchHasObj?.children?.length &&
          isBatchHasObj.tmlx !== '判断题'
        "
      >
        <a-input-number
          placeholder="请填写选项数量"
          v-model:value="isBatchHasObj.xxsl"
          :min="1"
          :max="25"
          :step="1"
          style="width: 50%; margin-right: 10px"
        ></a-input-number>
        <span>
          示例：{{
            isJdWrongType
              ?.slice(0, isBatchHasObj.xxsl || 4)
              .map(item => item.label)
              .join(',')
          }}
        </span>
      </a-form-item>
      <a-form-item label="是否最小得分单位" name="sfzxdtdw">
        <a-switch
          :disabled="
            isBatchHasObj.tmlx === '填空题' || machineReadableProblem.includes(isBatchHasObj.tmlx)
          "
          v-model:checked="isBatchHasObj.sfzxdtdw"
          @change="switchChange"
          checkedChildren="是"
          unCheckedChildren="否"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
    </div>

    <a-form-item label="序号" name="tmxh">
      <a-input
        :disabled="!!isBatchHasObj.id"
        placeholder="请填写题目序号(例：1,2,3,一,二,三,Ⅰ,Ⅱ,Ⅲ)"
        v-model:value="isBatchHasObj.tmxh"
      ></a-input>
    </a-form-item>

    <div class="text-center">
      <a-button type="primary" @click="submiFun(false)"> 保 存 </a-button>
      <a-button
        type="primary"
        class="ml-5"
        @click="submiFun(isMinimumUnit || isBatchHasBloon)"
        v-if="isMinimumUnit || isBatchHasBloon"
      >
        更多设置
      </a-button>
    </div>
  </a-form>
  <a-empty :image="simpleImage" v-else :description="'请选择左侧试题后操作'" />
</template>

<script lang="ts" setup>
import { reactive, computed, ref } from 'vue'

import { isJdCorrectType, isJdWrongType, teacherOptions } from '../index'

import { useMessage } from '/@/hooks/web/useMessage'

const { createMessage } = useMessage()

import { machineReadableProblem } from '../index'

import { Empty } from 'ant-design-vue'
const AEmpty = Empty
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const emit = defineEmits(['success'])

const props = defineProps({
  isBatchHasObj: { type: Object, default: {} },
})

// 是否最小试题
const isMinimumUnit = computed(() => {
  // 不存在子试题且是最小得分单位
  return (
    (!props.isBatchHasObj.children || !props.isBatchHasObj.children.length) &&
    props.isBatchHasObj.tmlx !== '填空题' &&
    !machineReadableProblem.includes(props.isBatchHasObj.tmlx) &&
    props.isBatchHasObj.sfzxdtdw === 1 &&
    props.isBatchHasObj.sfwmk === 0
  )
})

// 是否批量设置题型
const isBatchHasBloon = computed(() => {
  return (
    (props.isBatchHasObj.tmlx === '填空题' ||
      machineReadableProblem.includes(props.isBatchHasObj.tmlx)) &&
    props.isBatchHasObj?.children &&
    props.isBatchHasObj?.children.length &&
    props.isBatchHasObj?.children[0]?.sfzxdtdw === 1 &&
    props.isBatchHasObj.sfwmk === 0
  )
})

const Data = reactive({
  teacherOptions,
  editabDataChead: { distributeAccountList: [] },
  rules: {
    tmlx: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
    tmfz: [{ required: true, message: '请填写题目分值', trigger: 'change' }],
    xxsl: [{ required: true, message: '请填写选项数量', trigger: 'change' }],
    tmxh: [{ required: true, message: '请填写题目序号', trigger: 'change' }],
    tmbh: [{ required: true, message: '请填写题目编号', trigger: 'change' }],
    mkmc: [{ required: true, message: '请填写模块名称', trigger: 'change' }],
  },
} as any)

function switchChange(checked) {
  if (props.isBatchHasObj.children?.length) {
    props.isBatchHasObj.sfzxdtdw = 0
    createMessage.warning('该题存在子题，请先删除子题')
  }
}

const setForm = ref<any>()

async function submiFun(type: boolean = false) {
  setForm.value?.validate().then(() => {
    emit('success', type)
  })
}
</script>
